<template>
	<view class="tab-bar">
		<view class="tab-item" :class="{ active: currentTab === 'all' }" @click="changeTab('all')">
			全部消息
		</view>
		<view class="tab-item" :class="{ active: currentTab === 'unread' }" @click="changeTab('unread')">
			未读消息
		</view>
	</view>
	<view class="message-page">
		<view class="content">
			<view class="empty-content" v-if="isEmpty">
				<image src="/static/empty-icon.png" mode="widthFix"></image>
				<text>暂无数据，如有问题，请联系客服</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEmpty: true,
				currentTab: 'all'
			};
		},
		methods: {
			changeTab(tab) {
				this.currentTab = tab;
				console.log('切换到选项卡:', tab);
			}
		}
	};
</script>

<style lang="scss">
	.tab-bar {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		position: static;
		top: 0;

		.tab-item {
			width: 130rpx;
			text-align: center;
			padding: 20rpx 0;
			font-size: 28rpx;
			color: #666666;

			&.active {
				color: #3399ff;
				border-bottom: 6rpx solid #3399ff;
				font-size: 30rpx;
			}
		}
	}

	.message-page {
		background-color: #f5f5f5;
		height: 100vh;
		display: flex;
		flex-direction: column;



		.content {
			flex: 1;
			background-color: #f5f5f5;
			overflow-y: auto;

			.empty-content {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);


				image {
					width: 200rpx;
					height: 200rpx;
				}

				text {
					font-size: 24rpx;
				}
			}
		}
	}
</style>